<i18n>
{
  "zh" : {
    "home": "首页",
    "aboutUs": "关于我们",
    "projects": "参与项目"
  },
  "jp": {
    "home": "トップ",
    "aboutUs": "企業情報",
    "projects": "制作実績"
  },
  "en": {
    "home": "Home",
    "aboutUs": "About Us",
    "projects": "Projects"
  }
}
</i18n>

<template>
  <div class="top-guide">
    <div class="logo">

    </div>
    <div class="nav-list">
      <router-link to="/">{{ $t('home')}}</router-link> |
      <router-link to="/about">{{ $t('aboutUs') }}</router-link> |
      <router-link to="/projects">{{ $t('projects') }}</router-link>
    </div>
    <div class="lang">
      <ul class="lang-choose" v-if="chooseShow" @click="langChange($event)">
        <li v-for="(item, idx) in langList" :key="`Lang${idx}`" :class="item">{{ langContent[idx] }}</li>
      </ul>
      <div class="lang-area">
        <div class="cur-lang">{{ Content }}</div>
        <div class="lang-btn" @click="chooseToggle"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Vue } from 'vue-property-decorator'

@Component
export default class TopGuide extends Vue{
  private langList: Array<string> = ["zh", "jp", "en"]
  private langContent: Array<string> = ["中文", "日本语", "English"]
  private chooseShow: boolean = false;
  private Content: string = "中文";

  @Emit()
  chooseToggle (): void {
    this.chooseShow = !this.chooseShow
  }

  @Emit('chooseToggle')
  langChange (event: any) {
    this.Content = event.target.innerText;
    this.$i18n.locale = event.target.className;
  }
}
</script>

<style lang="scss" scoped>
.top-guide {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  .lang{

    .lang-btn {
      width: 20px;
      height: 20px;
      background-color: orange;
    }
  }
}
</style>